function Slider(domID){
	this.sliderBox = document.getElementById(domID);
	this.slider = this.sliderBox.children[0];
	this.sliderList = this.slider.children;

	this.timer = null;
	this.i = 0;
	this.clear();
	this.autoPlay();

}

Slider.prototype.move = function(){
		this.i++;
		
		if(this.i == this.sliderList.length){
			this.i = 0;
		}
		if(this.i == -1){
			this.i = this.sliderList.length - 1;
		}
		
		if(this.numList){
			for(let i = 0; i < this.numList.length; i++){
				this.numList[i].className =  "";
			}
			this.numList[this.i].className = "hover";
		}
		
		for(let i = 0; i < this.sliderList.length; i++){
			startMove(this.sliderList[i],{opacity:0});
		}
		startMove(this.sliderList[this.i],{opacity:100});
		
}

Slider.prototype.autoPlay = function(){
	this.timer = setInterval(()=>{
		this.move();
	},3000);
}
Slider.prototype.addBtns = function(){
	let oBtn = document.createElement("div");
	oBtn.className = "btn";
	this.sliderBox.appendChild(oBtn);
	oBtn.innerHTML = "<span>&lt;</span><span>&gt;</span>";
	
	let aBtns = oBtn.children;
	aBtns[0].onclick = ()=>{
		this.i -= 2;
		this.move();
	}
	aBtns[1].onclick = ()=>{
		this.move();
	}
	
}
Slider.prototype.addFocus = function(){
	var oFocus = document.createElement("ul");
	oFocus.className = "focus";
	this.sliderBox.appendChild(oFocus);
	let str = "";
	for(let i = 0; i < this.sliderList.length; i++){
		str += "<li>"+(i+1)+"</li>"
	}
	oFocus.innerHTML = str;
	
	this.numList = oFocus.children;
	this.numList[0].className = "hover";
	
	for(let i = 0; i < this.numList.length; i++){
		this.numList[i].onmouseover = ()=>{
			this.i = i-1;
			this.move();
		}
	}
}

Slider.prototype.clear = function(){
	this.sliderBox.onmouseover = ()=>{
		clearInterval(this.timer);
	}
	this.sliderBox.onmouseout = ()=>{
		this.timer = setInterval(()=>{
			this.move();
		},3000)
	}
}
